<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html"; charset="utf-8" />
    <title>客房情况</title>
    <link href="../../../css/main.css" rel="stylesheet" type="text/css">
    <link href="../../../bstable/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="../../../bstable/css/bootstrap-table.css" rel="stylesheet" type="text/css">
    <script src="../../../js/vue.min.js"></script>
    <script src="../../../js/axios.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>

<div class="tabe_div" id="app">
    <p class="p_line text_ient"><a class="find_a">用户名称：</a><input type="text" class="form_input text_ient" placeholder="输入名称"/>
        <a  class="find_a">权限管理员：</a>
        <select class="form_select" style="padding-left: 1%;">
            <option>全部</option>
            <option>1星</option>
            <option>2星</option>
            <option>3星</option>
            <option>4星</option>
            <option>5星</option>
        </select>
        <input type="button" value="查询" class="but_find"/><p>
    <p class="p_table">
        <a href="#" class="a_add" id="add_box" onclick="openlayer('')">添加</a><a href="#" class="a_add">全部导出</a>
    </p>
    <div>
        <el-table ref="adminTable"
                       data="list"
                       style="width: 100%;"
                      >
        <el-table-column label="编号" width="100" align="center">
            <template slot-scope="scope">{{scope.row.id}}</template>
        </el-table-column>
        <el-table-column label="帐号" align="center">
            <template slot-scope="scope">{{scope.row.username}}</template>
        </el-table-column>
        <el-table-column label="姓名" align="center">
            <template slot-scope="scope">{{scope.row.nickName}}</template>
        </el-table-column>
        <el-table-column label="邮箱" align="center">
            <template slot-scope="scope">{{scope.row.email}}</template>
        </el-table-column>
        <el-table-column label="添加时间" width="160" align="center">
            <template slot-scope="scope">{{scope.row.createTime | formatDateTime}}</template>
        </el-table-column>
        <el-table-column label="是否启用" width="140" align="center">
            <template slot-scope="scope">
                <el-switch

                        active-value="1"
                        inactive-value="0"
                        v-model="scope.row.status">
                </el-switch>
            </template>
        </el-table-column>
        <el-table-column label="操作" width="180" align="center">
            <template slot-scope="scope">
                <el-button size="mini"
                           type="text"
                          >分配角色
                </el-button>
                <el-button size="mini"
                           type="text"
                       >
                    编辑
                </el-button>
                <el-button size="mini"
                           type="text"
                        >删除
                </el-button>
            </template>
        </el-table-column>
    </el-table>
    </div>
    <el-pagination
            background
            @current-change="handleCurrentChange"
            layout="total,prev, pager, next,jumper"
            :current-page.sync="pageNum"
            :page-size="pageSize"
            :total="total">
    </el-pagination>
</div>
<script>
    var v=new Vue({
        el:"#app",
        data:{
            pageNum:"",
            pageSize:"",
            total:"",
            page:[],
        },
        created() {
            this.handleCurrentChange(1);
        },
        methods:{
            handleCurrentChange(val){
                let params=new URLSearchParams();
                params.append("pageNum",val);
                params.append("pageSize",this.pageSize);
                axios.get("cs-manage/umsUser/list",params).then(res=>{
                    console.log(res.data);
                });
            }
        }
    })
</script>
</body>
</html>
